<template>
    <div>
        <v-toolbar dark color="primary" style="box-shadow:none">
            <v-icon @click="$router.back(-1)">keyboard_arrow_left</v-icon>
            <v-toolbar-title style="margin:0">个人信息</v-toolbar-title>
        </v-toolbar>
        <v-list>
            <v-list-tile @click="sheet=true">
                <v-list-tile-content>
                    <v-list-tile-title>头像</v-list-tile-title>
                </v-list-tile-content>
                <v-list-tile-avatar>
                    <img src='../../assets/avatar.jpg'>

                <div style="position:absolute;opacity:0">        
                    <v-bottom-sheet v-model="sheet">
                    <v-list>
                        <v-list-tile>
                            <v-list-tile-title @click="openFile()">更换头像</v-list-tile-title>
                        </v-list-tile>
                        <v-list-tile>
                            <v-list-tile-title @click="sheet = false">取消</v-list-tile-title>
                        </v-list-tile>
                    </v-list>
                    </v-bottom-sheet>

                    <input type="file" style="display:none" id="open_file_input">
                 </div>  
                </v-list-tile-avatar>
            </v-list-tile>
            <v-divider></v-divider>
            <div>
                <!-- 昵称栏 -->
                <v-list-tile>
                    <v-list-tile-content>
                        <v-list-tile-title>昵称</v-list-tile-title>
                    </v-list-tile-content>
                    <v-list-tile-action>
                        <span style="font-size:15px;color:#757575">{{user_info.name}}</span>
                    </v-list-tile-action>
                </v-list-tile>
                <v-divider></v-divider>
                
                <!-- 账号栏 -->
                <v-list-tile>
                    <v-list-tile-content>
                        <v-list-tile-title>账号</v-list-tile-title>
                    </v-list-tile-content>
                    <v-list-tile-action>
                        <span style="font-size:15px;color:#757575">{{user_info.account}}</span>
                    </v-list-tile-action>
                </v-list-tile>
                <v-divider></v-divider>

                <!-- 修改密码栏 -->
                <v-list-tile @click='modify("dialog_password")'>
                    <v-list-tile-content>
                        <v-list-tile-title>修改密码</v-list-tile-title>
                    </v-list-tile-content>
                </v-list-tile>
            </div>
        </v-list>
        <div style="height:30px;background:transparent"></div>
            <v-list>
                <div>
                    <!-- 性别栏 -->
                    <v-list-tile>
                        <v-list-tile-content>
                            <v-list-tile-title>性别</v-list-tile-title>
                        </v-list-tile-content>
                        <v-list-tile-action>
                            <span style="font-size:15px;color:#757575" @click='modify("dialog_sex")'>{{user_info.sex}}</span>
                        </v-list-tile-action>
                    </v-list-tile>
                    <v-divider></v-divider>

                    <!-- 社区栏 -->
                    <v-list-tile>
                        <v-list-tile-content>
                            <v-list-tile-title>小区</v-list-tile-title>
                        </v-list-tile-content>
                        <v-list-tile-action>
                            <span style="font-size:15px;color:#757575">{{user_info.community}}</span>
                        </v-list-tile-action>
                    </v-list-tile>
                    <v-divider></v-divider>

                    <!-- 年龄栏 -->
                    <v-list-tile>
                        <v-list-tile-content>
                            <v-list-tile-title>出生日期</v-list-tile-title>
                        </v-list-tile-content>
                        <v-list-tile-action>
                            <span style="font-size:15px;color:#757575" @click='modify("dialog_birth")'>{{user_info.birth}}</span>
                        </v-list-tile-action>
                    </v-list-tile>
                    <v-divider></v-divider>

                    <!-- 电话栏 -->
                    <v-list-tile>
                        <v-list-tile-content>
                            <v-list-tile-title>联系电话</v-list-tile-title>
                        </v-list-tile-content>
                        <v-list-tile-action>
                            <span style="font-size:15px;color:#757575" @click='modify("dialog_phone")'>{{user_info.phone}}</span>
                        </v-list-tile-action>
                    </v-list-tile>
                </div>
            </v-list>


        <!-- 密码修改框(到时候需要判断两次密码是否一致) -->
        <v-layout row justify-center>
            <v-dialog v-model="dialog_modify_password" persistent max-width="500px">
                <v-btn slot="activator" color="primary" dark id="dialog_password" style="display:none">Open Dialog</v-btn>
                <v-card>
                    <v-card-title>
                        <span class="headline">修改密码</span>
                    </v-card-title>
                    <v-card-text>
                        <v-container grid-list-md>
                            <v-layout wrap>
                                <v-flex xs12>
                                    <v-text-field label="请输入新密码" type="password" required v-model="newPassword"></v-text-field>
                                </v-flex>    
                                <v-flex xs12>
                                    <v-text-field label="确认新密码" type="password" required v-model="confirmPW"></v-text-field>
                                </v-flex>                     
                            </v-layout>
                        </v-container>
                        <small>*密码不能为空</small>
                    </v-card-text>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="blue darken-1" flat @click.native="cancelPW()">取消</v-btn>
                        <v-btn color="blue darken-1" flat @click.native="savePW()">保存</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </v-layout>

        <!-- 性别修改框 -->
        <v-layout row justify-center>
            <v-dialog v-model="dialog_modify_sex" persistent max-width="500px">
                <v-btn slot="activator" color="primary" dark id="dialog_sex" style="display:none">Open Dialog</v-btn>
                <v-card>
                    <v-card-title>
                        <span class="headline">修改性别</span>
                    </v-card-title>
                    <v-card-text>
                        <v-container fluid>
                            <v-radio-group v-model="chooseSex">
                                <v-radio label="男" value="男"></v-radio>
                                <p></p>
                                <v-radio label="女" value="女"></v-radio>
                            </v-radio-group>
                        </v-container>
                    </v-card-text>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="blue darken-1" flat @click.native="cancelSex()">取消</v-btn>
                        <v-btn color="blue darken-1" flat @click.native="saveSex()">保存</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </v-layout>

        <!-- 出生日期修改框 -->
        <v-layout row justify-center>
            <v-dialog
                ref="dialog"
                v-model="dialog_modify_birth"
                :return-value.sync="user_info.birth"
                persistent
                lazy
                full-width
                width="290px"
            >
                <v-text-field
                    slot="activator"
                    v-model="user_info.birth"
                    id="dialog_birth"
                    readonly
                    style="display:none"
                ></v-text-field>
                <v-date-picker v-model="user_info.birth" scrollable locale='zh-CN'>
                    <v-spacer></v-spacer>
                    <v-btn flat color="primary" @click="dialog_modify_birth = false">取消</v-btn>
                    <v-btn flat color="primary" @click="saveBirth()">保存</v-btn>
                </v-date-picker>
            </v-dialog>
        </v-layout>

        <!-- 联系电话修改框 -->
        <v-layout row justify-center>
            <v-dialog v-model="dialog_modify_phone" persistent max-width="500px">
                <v-btn slot="activator" color="primary" dark id="dialog_phone" style="display:none">Open Dialog</v-btn>
                <v-card>
                    <v-card-title>
                        <span class="headline">修改联系电话</span>
                    </v-card-title>
                    <v-card-text>
                        <v-container grid-list-md>
                            <v-layout wrap>
                                <v-flex xs12>
                                    <input type='number' placeholder="请输入联系电话" style="outline:none" v-model="phoneNum" oninput="if(this.value.length>11){this.value=this.value.slice(0,11)}"/>
                                </v-flex>                         
                            </v-layout>
                        </v-container>
                        <small>*联系电话不能为空</small>
                    </v-card-text>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="blue darken-1" flat @click.native="cancelPhone()">取消</v-btn>
                        <v-btn color="blue darken-1" flat @click.native="savePhone()">保存</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </v-layout>

    </div>


</template>

<script>
export default {
    data(){
        return {
            user_info:{
                name:'张三',
                account:'123',
                sex:'男',
                community:'国际软件学院',
                birth:'2000-01-01',
                phone:'11111111111'
            },

            publicKey:'',

            sheet:false, //更改头像
            dialog_modify_password:false,
            dialog_modify_sex:false,
            dialog_modify_birth:false,
            dialog_modify_phone:false,

            newPassword:'',
            confirmPW:'',
            chooseSex:'',
            phoneNum:'',
        }
    },

    methods:{
        openFile(){
            var input=document.getElementById("open_file_input");
            input.click();
        },
        modify:function(id){
            var dialog=document.getElementById(id);
            dialog.click();
        },

        getPublickKey(){ //从后台获得公钥

            this.$axios.get('/users/toUpdate')
                .then(function(response){
                    console.log(response);
                    if(JSON.parse(response.data).meta.success==true){
                        this.publicKey=JSON.parse(response.data).data;
                        console.log(this.publicKey);
                    }
                })
                .catch(function(error){
                    console.log(error);
                })

        },

        getRSApassword(password){ //公钥加密
            //实例化一个JSEncrypt对象
            let jse=new this.$jsEncrypt.JSEncrypt();
            jse.setPublickKey(this.publicKey);
            //设置需要加密的字符串
            let encrypted=jse.encrypt(password);
            return encrypted;
        },




        savePW(){ //修改密码
            if(this.newPassword==''){
                alert("密码不能为空")
            }else if(this.newPassword!=this.confirmPW){
                alert("两次密码输入不一致")
            }else{
                this.dialog_modify_password = false;
                var formdata=new FormData();
                formdata.append("password",this.getRSApassword(this.newPassword));
                this.$axios.put('/users',formdata)
                    .then(function(response){
                        console.log(response);
                        if(JSON.parse(response.data).meta.success==true){
                            alert("修改密码成功");
                            this.newPassword='';
                            this.confirmPW='';
                            this.$router.push('login')
                        }else{
                            alert(JSON.parse(response.data).meta.message)
                        }
                    })
                    .catch(function(error){
                        console.log(error)
                    })
            }
        },

        cancelPW(){

            this.newPassword='';
            this.confirmPW='';
            this.dialog_modify_password = false;
        },

        saveSex(){ //修改性别

            if(this.chooseSex==''){
                alert("性别不能为空！")
                return;
            }else if(this.chooseSex!=this.user_info.sex){
                
                this.user_info.sex=this.chooseSex;
            }
            
            this.chooseSex='';
            var formdata=new FormData();
            formdata.append("userSex",this.user_info.sex);

            this.$axios.put('/users',formdata)
                .then(function(response){
                    console.log(response);
                     if(JSON.parse(response.data).meta.success==true){
                            alert("修改性别成功");
                            this.dialog_modify_sex=false;
                        }else{
                            alert(JSON.parse(response.data).meta.message)
                        }
                    })
                    .catch(function(error){
                        console.log(error)
                    })
        },

        cancelSex(){
            this.chooseSex='';
            this.dialog_modify_sex = false;
        },

        saveBirth(){ //修改出生日期

            this.$refs['dialog'].save(this.user_info.birth);
            
            var formdata=new FormData();
            formdata.append("userBirth",this.user_info.birth);

            this.$axios.put('/users',formdata)
                .then(function(response){
                        console.log(response);
                        if(JSON.parse(response.data).meta.success==true){
                            alert("修改生日成功");
                            this.dialog_modify_birth=false;
                        }else{
                            alert(JSON.parse(response.data).meta.message)
                        }
                    })
                    .catch(function(error){
                        console.log(error)
                    })      
        },

        savePhone(){ //修改联系电话

            if(this.phoneNum==''){
                alert("联系电话不能为空！");
                return;
            }

            if(this.phoneNum!=this.user_info.phone){
                this.user_info.phone=this.phoneNum;
            }

            var formdata=new FormData();
            formdata.append("userPhone",this.user_info.phone);
            this.$axios.put('/users',formdata)
                .then(function(response){
                    console.log(response);
                        if(JSON.parse(response.data).meta.success==true){
                            alert("修改联系方式成功");
                            this.dialog_modify_phone=false;
                            this.phoneNum='';
                        }else{
                            alert(JSON.parse(response.data).meta.message)
                        }
                    })
                    .catch(function(error){
                        console.log(error)
                    })
        },

        cancelPhone(){
            this.phoneNum='';
            this.dialog_modify_phone=false;
        }
    },

    mounted(){
        //this.getPublickKey();
    }
}
</script>

